import Input from "antd/es/input";
import arrow from "../../../assets/sendChat/2.png";
import voice from "../../../assets/sendChat/5.png";
import { useState } from "react";
import { AnyObject } from "antd/es/_util/type";
// AI翻译
const AIInput = ({ placeholder, toolLeft, toolRight, size }: AnyObject) => {
  const [str, setStr] = useState("");
  return (
    <div className={`${size ? "" : "py-4 px-3.5 w-full"}`}>
      <div className="flex justify-between items-end">
        <div className="flex flex-col flex-1">
          <Input
            className="bg-transparent hover:bg-transparent focus:bg-transparent 
                   border-0 focus:border-purple-500 focus:ring-0 
                   hover:border-purple-500 text-white placeholder-gray-black"
            placeholder={placeholder}
            value={str}
            onChange={(e) => setStr(e.target.value)}
          />
          {toolLeft}
        </div>
        <div className="mr-3 flex items-center flex-none">
          {toolRight}
          <img src={voice} alt="" className="w-4 h-4 mr-1" />
          <div className="h-4 border-re-black border mr-3"></div>
          <div
            className={`w-6 h-6 rounded-full ${
              str ? "bg-blue" : "bg-re-black"
            } flex items-center justify-center cursor-pointer`}
          >
            <img src={arrow} alt="" className="w-4 h-4" />
          </div>
        </div>
      </div>
    </div>
  );
};
export default AIInput;
